<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">-->
<link type="text/css" href="/css/cultivateWeb/style/news.css" rel="stylesheet">
<link rel="stylesheet" href="/css/cultivateWeb/style/apply.css">
<style>
    button[disabled], html input[disabled] {
        cursor: not-allowed;
        background: #666;
    }
    @media screen and (max-width: 768px) {
        body {
            font-size: 1rem
        }

    }

    .form_div {
        display: flex;
    }

    .spans_2 {
        width: 140px;
        float: left;
        margin: 20px 0;
        font-size: 16px;
    }

</style>
<body style=" height: 100%;width: 100%; position: absolute;">
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header(false)"></header>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; min-height: calc(100% - 327px) ">
    <!--    <div class="container">-->
    <div class="main-md">
        <!--        <div class="row">-->
        <div class="layui-container">
            <!--        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a href="/cultivate/my">个人资料</a> > 编辑个人资料</p>-->
            <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> / <span style="color:#4b90be">编辑个人资料</span>
            </p>
        </div>
        <!--    <hr style="margin: auto auto 40px auto  ;"/>-->
        <section id="info" style="padding:10px;box-sizing: border-box">
            <div style="margin:0 auto;">
                <!--             <span style="float: right"><a href="/cultivate/my"><input class="edit" type="button" value="返回上一页"/></a></span>-->
                <!--            <div style="clear: both"></div>-->
                <!--            <form id="formId"></form>-->
                <div id="myList" style="width: 100%;height: 600px; margin-top: 20px;">
                </div>
            </div>
            <!--        <div style="clear: both"></div>-->
        </section>
        <!--        </div>-->
    </div>
    <!-- 分页 -->
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<!--<script type="text/javascript" src="/js/bootstrap.min.js"></script>-->
<script src="/js/jquery.citys.js"></script>
<script src="/lib/layui/layui.js"></script>
</body>

<script>
    var myolddata={
        title1:'',
        title2:'',
        title3:''
    }
    var countdown = 60;

    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            // val.value = "获取验证码";
            $(val).text("获取验证码");
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            // val.value = "" + countdown + "";
            $(val).text("重新发送(" + countdown + ")")
            countdown--;
            var myVar = setTimeout(function () {
                settime(val)
            }, 1000)
        }
    }
    //获取验证码
    const send=(val)=> {
        var name =$($(val).prev()).val();
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(name))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式');
            return false
        }
        val.setAttribute("disabled", true);
        if (name.length != 0) {
            jQuery.ajax({
                url: '/certificate/sendRegCode',
                type: 'POST',
                data: {mobile: name},
                success: function (data) {
                    if (data == 1) {
                        val.removeAttribute("disabled");
                        $(val).text("获取验证码");
                        countdown = 60;
                        layer.msg(data.msg)
                    } else {
                        layer.msg("发送成功");
                        $(val).text("重新发送(" + countdown + ")")
                        countdown--;
                        setTimeout(function () {
                            settime(val)
                        }, 1000)
                    }
                }
            })
        } else {
            layer.msg('请输入手机号！');
        }
    }
    $('#mobile').blur(function () {
        var mobiles = $("#mobile").val();
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(mobiles))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式');
            return false
        }
    })
    //获取用户
    const  getData=()=>{
        //获取id
        $.ajax({
            url: `/sysxn/user/select`,
            type: "GET",
            data:{
                id:window.localStorage.getItem("userId")
            },
            success:  (r)=>{
                console.log('获取数据', r)
            var res = r.data;
            //3教师 4管理员，5学生
            const title1=Number(res.type)==3?'教师':(Number(res.type)==4?'管理员':(Number(res.type)==4?'学生':''))
            const title2=res.mobile.substr(0,3)+'***'+res.mobile.substr(res.mobile.length-4,res.mobile.length-1)
            myolddata.title1=title1
            myolddata.title2=res.studentId
            myolddata.title3=title2
            myolddata.id=res.id


            const myListData = `
 <div style="display: flex;     padding: 20px 0; flex-direction: row; border-bottom: 1px solid #ebebeb;">
                <div style=" width: 30%;">账号类型</div>
                <div style=" width: 70%;display: flex;  flex-direction: row; justify-content: space-between;">
                    <div>${title1}</div>
                </div>
</div>
 <div style="display: flex;     padding: 20px 0; flex-direction: row; border-bottom: 1px solid #ebebeb;">
                <div style=" width: 30%;">工号/学号</div>
                <div style=" width: 70%;display: flex;  flex-direction: row; justify-content: space-between;">
                    <div>${res.studentId}</div>
                    <button lay-on="load1"
                     class="layui-btn  layui-btn-primary layui-border-blue" style="border: 0">修改</button>
                </div>
            </div>
             <div style="display: flex;     padding: 20px 0; flex-direction: row; border-bottom: 1px solid #ebebeb;">
                <div style=" width: 30%;">手机号</div>
                <div style=" width: 70%;display: flex;  flex-direction: row; justify-content: space-between;">
                    <div>${title2}</div>
                    <button lay-on="load2"
                    class="layui-btn  layui-btn-primary layui-border-blue" style="border: 0">修改</button>
                </div>
            </div>
`
                /**
                 *   <div style="display: flex;     padding: 20px 0; flex-direction: row; border-bottom: 1px solid #ebebeb;">
                 *                 <div style=" width: 30%;">登录密码</div>
                 *                 <div style=" width: 70%;display: flex;  flex-direction: row; justify-content: space-between;">
                 *                     <div>登录时输入的密码</div>
                 *                     <button lay-on="load3"
                 *                     class="layui-btn  layui-btn-primary layui-border-blue" style="border: 0">修改</button>
                 *                 </div>
                 *             </div>
                 */
            $("#myList").html(myListData);
            },
            error: function (rs) {
                console.log(rs)
                layer.close(layer.index)
            }
        })

    }
    $(function () {

        layui.use(['layer','util'], ()=> {
            var layer = layui.layer;
            var util = layui.util;
            console.log('======asasas=',util)
            // 批量事件
            util.on('lay-on', {
                load1:  ()=>{
                    // 页面层
                    layer.open({
                        type: 1,
                        title:'修改工号/学号',
                        area: ['420px', '240px'], // 宽高
                        btn: ['提交'],
                        btnAlign:"c",
                        content: `
                           <div style="height: 100%;width: 100%;display: flex; justify-content: space-evenly; flex-direction: column;">
                           <div class="layui-input-wrap" style=" width: 90%;  margin-left: 5%;  margin-top: 20px;font-size: 15px;  ">
                            <input value="${myolddata.title2}"  name="code" id="input" type="text" class=" layui-input" placeholder="请输入工号/学号"/>
                         </div>
                        </div>

                        `,
                        btn1: function (index, layero) {
                            console.log('工号更改结果',layero.find('#input').val())
                            //editJobNum
                            $.ajax({
                                type: "POST",
                                url: '/certificate/editJobNum',
                                data: {
                                    num:layero.find('#input').val(),
                                    id:myolddata.id
                                },
                                success: function (r) {
                                    if (r.msg == '请求成功') {
                                      //关闭
                                        layer.close(index);
                                        getData()
                                    } else {
                                        layer.msg(r.msg)
                                    }
                                }
                            });

                        }

                    });
                },
                load2:  ()=> {
                    // 页面层
                    layer.open({
                        type: 1,
                        title:'修改手机号',
                        area: ['420px', '240px'], // 宽高
                        btn: ['提交'],
                        btnAlign:"c",
                        content: `
                           <div style="height: 100%;width: 90%;  margin-left: 5%; display: flex; justify-content: space-evenly; flex-direction: column;">
                             <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                                <input id="mobile" style="width: 100%;" name="mobile" type="number" class=" layui-input" placeholder="请输入手机号"/>
                            </div>
                        </div>  `,
                        /**
                         *  <button type="button" onclick="send(this)" class="layui-btn layui-bg-blue layui-input-split layui-input-suffix "
                         *                                     style="width: 100px;pointer-events: painted;">获取验证码</button>
                         *
                         *
                         *                           <div class="layui-input-wrap" style=" margin-top: 20px;font-size: 15px;  ">
                         *                             <input value=""  name="code" id="code" type="text" class=" layui-input" placeholder="请输入验证码"/>
                         *                          </div>
                         */
                        success: function(layero, index){
                            console.log('=======asasassend==')

                        },
                        btn1: function (index, layero) {
                           var mobile= layero.find('#mobile').val()
                           var code= layero.find('#code').val()
                           if ('' == mobile) {
                                    layer.msg('请输入手机号');
                                    return false
                                }
                           if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(mobile))) {
                                    layer.msg('手机号码填写错误，请填写正确的手机格式');
                                    return false
                            }

                            $.ajax({
                                type: "POST",
                                url: '/certificate/editPhone',
                                data: {
                                    mobile:mobile,
                                    code:code,
                                    id:myolddata.id
                                },
                                success:  (r)=> {
                                    if (r.msg.indexOf('成功')>-1) {
                                       //修改手机号
                                        window.localStorage.setItem("mobile", mobile);
                                        window.localStorage.setItem("userName", mobile);
                                        $(".nm").text(mobile?mobile.substring(0,3)+'***'+mobile.substring(mobile.length-3,mobile.length):'');
                                        //header修改
                                        //关闭
                                        layer.close(index);
                                        getData()
                                    } else {
                                        layer.msg(r.msg)
                                    }
                                }
                            });

                        }
                    });
                },
                // load3:  ()=>{
                //     // 页面层
                //     layer.open({
                //         type: 1,
                //         title:'修改密码',
                //         area: ['420px', '500px'], // 宽高
                //         btn: ['提交'],
                //         btnAlign:"c",
                //         content: `
                //            <div style="height: 100%;width: 90%;  margin-left: 5%; display: flex; justify-content: space-evenly; flex-direction: column;">
                //              <div class="layui-input-wrap" style=" width: 100%;  margin-top: 10px;    font-size: 15px;  ">
                //                 <input id="mobile" style="width: calc(100% - 90px);" name="mobile" type="number" class=" layui-input" placeholder="请输入手机号"/>
                //
                //             <button type="button" onclick="send(this)" class="layui-btn layui-bg-blue layui-input-split layui-input-suffix "
                //                     style="width: 100px;pointer-events: painted;">获取验证码</button>
                //              </div>
                //
                //           <div class="layui-input-wrap" style=" margin-top: 20px;font-size: 15px;  ">
                //             <input value=""  name="code" id="code" type="text" class=" layui-input" placeholder="请输入验证码"/>
                //          </div>
                //
                //          <div class="layui-input-wrap" style=" margin-top: 20px; font-size: 15px;  ">
                //             <input  name="newPassWord" id="newPassWord" type="password"
                //                     class="layui-input" autocomplete="off" placeholder="请输入8位数新密码"/>
                //
                //         </div>
                //
                //         <div class="layui-input-wrap" style="margin-top: 20px; font-size: 15px; ">
                //             <input  name="password" id="password" type="password" class=" layui-input"
                //                     autocomplete="off" placeholder="请输入您的密码"/>
                //         </div>
                //
                //         </div>
                //
                //         `,
                //         success: function(layero, index){
                //             console.log('=======asasassend==')
                //
                //         },
                //         btn1: function (index, layero) {
                //             var mobile= layero.find('#mobile').val()
                //             var code= layero.find('#code').val()
                //             var password = layero.find("#password").val();
                //             var newPassword = layero.find("#newPassWord").val();
                //             if ('' == mobile) {
                //                 layer.msg('请输入手机号');
                //                 return false
                //             }
                //             if ('' == code) {
                //                 layer.msg('请输入验证码');
                //                 return false
                //             }
                //             if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(newPassword))) {
                //                 layer.msg('您的密码复杂度太低（密码中必须包含字母、数字且不小于8个字符）');
                //                 return false
                //             }
                //             if (password != newPassword){
                //                 layer.msg("两次密码输入不一致，请修改后提交！")
                //                 return false
                //             }
                //
                //             $.ajax({
                //                 url: "/jzApi/utils/forgetPassWord",
                //                 type:'POST',
                //                 data: {
                //                     mobile: mobile ,
                //                     code: code,
                //                     newPassWord: newPassword,
                //                     password: password
                //                     },
                //                 success: function (r) {
                //                     if(r.msg.indexOf('成功')>-1){
                //                         //关闭
                //                         layer.close(index);
                //                         getData()
                //                     }else{
                //                         layer.msg(r.msg);
                //                     }
                //                 }
                //             })
                //
                //
                //         }
                //     });
                // }
            })

            //获取数据
            getData()

        })


    });




</script>
</html>